<template>
  <div class="container">
    <el-row class="topSection boxBorder">
      <div class="topBox">
        <div style="position: relative">
          <el-select
            v-model="projectId"
            filterable
            placeholder="请选择项目"
            @change="changeProject"
          >
            <el-option
              v-for="(item, index) of projectList"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
        <el-link
          v-if="isMini !== 1 || miniRule.isAtt === 1"
          style="float: right; margin-top: -21px"
          type="primary"
          @click="goHistory"
          v-sdc
          class="fontBtn"
          >历史记录</el-link
        >
      </div>
    </el-row>
    <div class="mainCon">
      <div style="margin-top: 24px" v-if="isMini !== 1 || miniRule.isAtt === 1">
        <operateListTab
          @getSelected="getCurrentTabComponent"
          :groupList="groupList"
        ></operateListTab>
        <component
          v-bind:is="currentTabComponent"
          :showHistory="true"
          :type="componentType"
          :projectId="projectId"
          v-if="isOk && projectId"
        ></component>
      </div>
      <attendance-attach-record
        backPath="/home/constructAttendance/qyConstructAttendanceContainer"
        oldUrl="/home/constructAttendance/qyConstructAttendanceContainer"
        :showHistory="true"
        :type="componentType"
        :projectId="projectId"
        v-if="isOk && projectId && isMini === 1 && miniRule.isAtt === 0"
      ></attendance-attach-record>
    </div>
  </div>
</template>
<script>
import operateListTab from '@/components/publicCom/operateListTab'
import constructAttByDay from '@/components/constructAttendance/constructAttByDay'
import constructAttByYear from '@/components/constructAttendance/constructAttByYear'
import constructAttByMonth from '@/components/constructAttendance/constructAttByMonth'
import attendanceAttachRecord from '@/components/smallProjectManage/attendanceAttachRecord'

export default {
  name: 'qyjcConstructAttendanceContainer',
  components: {
    attendanceAttachRecord,
    operateListTab,
    constructAttByDay,
    constructAttByMonth,
    constructAttByYear,
  },
  data() {
    return {
      isMini: 0,
      miniRule: {},
      employeeName: '',
      titleText: '企业考勤',
      currentTabComponent: 'constructAttByDay',
      componentType: '',
      groupList: [
        { name: '按日统计', componentName: 'constructAttByDay' },
        {
          name: '按月统计',
          componentName: 'constructAttByMonth',
          componentType: 'month',
        },
        {
          name: '按年统计',
          componentName: 'constructAttByYear',
          componentType: 'year',
        },
      ],
      //项目名称切换
      projectList: [],
      projectId: '',
      isOk: true,
      path: '', //进入的路径
    }
  },
  async created() {
    this.$store.state.activeMenu =
      '/home/constructAttendance/qyConstructAttendanceContainer'

    await this.getProjectList()
    this.getMiniRule()
    //this.path = this.$route.query.path;
  },
  mounted() {
    // var that = this;
    // $('body').on('click','.el-message-box__wrapper',function(){
    //     that.$router.push({
    //         path: "/home/project/projectDeclareList",
    //         name: "projectDeclareList",
    //         query: {
    //             type: "projectDeclareList"
    //         }
    //     });
    //     that.$store.commit("CHANGE_SLIDER_NAME", {
    //         oldUrl:'/home/project/projectDeclareList',
    //         newUrl:that.$router.currentRoute.fullPath
    //     });
    // })
  },
  methods: {
    //获取小项目规则
    getMiniRule() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/findMiniProConfig',
        data: {
          projectId: this.projectId,
        },
      })
        .then((res) => {
          if (!res.data.hasError && res.data.result) {
            this.isMini = 1
            this.miniRule = res.data.result || {}
          } else {
            this.isMini = 0
          }
        })
        .catch((error) => {
          this.$message.error('查询失败')
        })
    },
    goHistory() {
      const path = '/home/smallProjectManage/attendanceAttachRecordPage'
      const oldUrl = '/home/constructAttendance/qyConstructAttendanceContainer'
      const backPath =
        '/home/constructAttendance/qyConstructAttendanceContainer'
      this.$router.push({
        path,
        query: {
          oldUrl,
          backPath,
          projectId: this.projectId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getCurrentTabComponent(data) {
      this.currentTabComponent = data.componentName
      this.componentType = data.componentType
    },
    getProjectList() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
      }).then(
        (response) => {
          if (!response.data.hasError) {
            this.projectList = response.data.result
            //判断是否从其他页面进入传了项目id参数
            if (this.$route.query.projectId) {
              this.projectId = this.$route.query.projectId
            } else {
              if (response.data.result.length > 0) {
                this.projectId = response.data.result[0].code
              } else {
                this.projectId = '暂无关联项目'
                this.skipProjectDeclareList()
              }
            }
          } else {
            this.projectId = '暂无关联项目'
            // this.projectId = "1";
          }
        },
        (response) => {
          this.projectId = '暂无关联项目'
        }
      )
      // .catch(error => {
      //   this.projectId = "暂无关联项目";
      // });
    },
    skipProjectDeclareList() {
      this.$confirm('您还未加入项目请前往项目申请页面申报项目', '', {
        confirmButtonClass: 'messageButColor',
        showCancelButton: false,
        showClose: false,
        closeOnClickModal: false,
      })
        .then(() => {
          this.$router.push({
            path: '/home/project/projectDeclareList',
            name: 'projectDeclareList',
            query: {
              type: 'projectDeclareList',
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/project/projectDeclareList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        })
        .catch(() => {})
    },
    changeProject(val) {
      this.isOk = false
      this.$nextTick(function () {
        this.isOk = true
      })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  padding: 0;
  height: calc(100% - 67px);
}
.topSection {
  background: #fff;
  border-radius: 4px 4px 0 0;
  padding: 16px 24px 16px 10px;
  // border-bottom: 1px solid #e3e7e9;
  .topBox {
    .projectState {
      display: inline-block;
      width: 60px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      margin-left: 10px;
      font-weight: normal;
      margin-top: 5px;
    }
    /deep/.el-input__inner {
      width: 346px;
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      border: none;
      height: 30px;
      // background: #E4EBF1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /deep/.el-select__caret {
      color: #333;
      font-size: 20px;
      line-height: 30px;
    }
  }
  /deep/.commonTab {
    margin-top: 21px;
  }
  /deep/.is-active {
    background: #fff;
  }
}
</style>
